import React, { Component, Fragment } from "react";
// antd
import { Button, Select, Drawer, Form, Col, Row, Input } from "antd";
// table 组件
import TableComponent from "@c/tableData/Index";
import Action from "@c/buttonAction/Index";
import MachineModal from "./components/MachineModal";
// Store
import Store from "@/stroe/Index";
// action
import { addStatus } from "@/stroe/action/Config";
import { Zone_Id } from "../../constants";
import "./index.scss";

const { Option } = Select;

class MachineList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // 抽屉状态
            drawerVisible: false,
            // 表头
            tableConfig: {
                url: "machineList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "实例ID/名称", 
                        render: (text, rowData) => {
                            return (
                                <div>
                                    <a href="/#">{rowData.instance_id}</a>
                                    <br></br>
                                    {rowData.instance_name}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "IPv4地址", 
                        render: (text, rowData) => {
                            console.log(rowData.eips, rowData.public_ips)
                            if(!rowData.public_ips){
                                rowData.public_ips = []
                            }
                            console.log('pppppppppp', rowData.public_ips)
                            return (
                                <div>
                                    {rowData.inner_ip}(内)
                                    <br></br>
                                    {rowData.eips ? `${rowData.eips} (弹性)` : ''}
                                    {rowData.public_ips.length !== 0 ? `${rowData.public_ips} (公)` : ''}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "可用区", 
                        dataIndex: "zone_id", 
                        key: "zone_id",
                        render: (zone_id) => {
                            let zone_info_zh = ''
                            console.log('zone_idzone_idzone_idzone_idzone_idzone_id',zone_id)
                            if(zone_id){
                                const zone_id_array = zone_id.split('-');  // cn-zhangjiakou-a
                                const zone_id_city = zone_id_array[1];
                                const zone_id_area = zone_id_array.slice(-1)[0];
                                console.log(zone_id_city, zone_id_area)
                                zone_info_zh = Zone_Id[zone_id_city] + " 可用区" + zone_id_area.toUpperCase();
                            }
                            return (
                                <div>{zone_info_zh}</div>
                            )
                        }
                    },
                    { 
                        title: "实例配置", 
                        key: "instance_config",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    {rowData.cpu}C {rowData.memory/1024}G
                                    <br></br>
                                    {rowData.os_type}
                                </div>
                            )
                        }
                    },
                    // { 
                    //     title: "实例类型", 
                    //     dataIndex: "type", 
                    //     key: "type",
                    //     width: '10%',
                    //     render: (type) => {
                    //         return (
                    //             <div>
                    //                 <Tag color='blue'>{type !== "null" ? "云主机" : '-'}</Tag>
                    //             </div>
                    //         )
                    //     }
                    // },
                    { title: "到期时间", dataIndex: "expired_time", key: "expired_time" },
                    {
                        title: "归属账号",
                        dataIndex: "account",
                        key: "account"
                    },
                    // { 
                    //     title: "实例配置", 
                    //     render: (text, rowData) => {
                    //         return (
                    //             <div>
                    //                 {rowData.Cpu}C {rowData.Memory/1024}G（{`${rowData.IoOptimized}` === 'true' ? 'I/O优化' : ''}）
                    //                 <br></br>
                    //                 {rowData.OSName}
                    //             </div>
                    //         )
                    //     }
                    // },
                    { title: "事业部", dataIndex: "department", key: "department" },
                    { 
                        title: "管理", 
                        dataIndex: "manage", 
                        key: "manage", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button >编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                        <Action.Button onClick={() => this.handleConsole(rowData)}>Console</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "内网IP", 
                        name: "inner_ip__contains", 
                        style: { width: "150px" },
                        placeholder: "请输入内网IP"
                    },
                    { 
                        type: "Input",
                        label: "实例ID", 
                        name: "instance_id__contains", 
                        style: { width: "150px" },
                        placeholder: "请输入实例ID"
                    },
                    { 
                        type: "Input",
                        label: "实例名称", 
                        name: "instance_name__contains", 
                        style: { width: "150px" },
                        placeholder: "请输入实例名称"
                    },
                    { 
                        type: "Select",
                        label: "可用区", 
                        name: "zone_id__contains", 
                        placeholder: "请选择",
                        style: { width: "100px" },
                        optionsKey: "zone_id"
                    },
                    { 
                        type: "SelectComponent",
                        label: "账号", 
                        url: "accountList",
                        method: "get",
                        name: "account_id",
                        propsKey: {
                            label: ["platform", "name"],
                            value: "id"
                        },
                        style: { width: "200px" },
                    },
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){
        Store.subscribe(() =>
            console.log(Store.getState())
        );

        Store.dispatch(addStatus({
            label: "Centos7",
            value: "centos7"
        }))

        // Store.dispatch(uploadStatus("aaaaa", false))
    }
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }

    // 获取弹窗子组件实例
    getMachineModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    machineModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    // 远程Console
    handleConsole = (info) => {
        console.log(info)
        window.open(`/ssh/${info.id}`)
    };
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    // 抽屉
    showDrawer = () => {
        this.setState({
            drawerVisible: true,
        });
      };
    
    onClose = () => {
        this.setState({
            drawerVisible: false,
        });
    };
    
    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig}>
                    <Button type="primary" ref="machineAdd" onClick={() => this.machineModal({ status: true })}>导入机器</Button>
                    <Select 
                        placeholder="软件安装"
                        onChange={this.showDrawer}
                        style={{ border: '1px solid #cfd5de' }}
                        >
                        <Option value="yum">yum (centos)</Option>
                        <Option value="apt">apt (ubuntu)</Option>
                        <Option value="pip">pip</Option>
                        <Option value="other">其他</Option>
                    </Select>
                </TableComponent>
                <MachineModal onRef={this.getMachineModalRef} />
                <Drawer
                        title="软件安装"
                        className="drawer-package"
                        placement="right"
                        closable={false}
                        onClose={this.onClose}
                        visible={this.state.drawerVisible}
                        getContainer={false}
                        bodyStyle={{ paddingBottom: 80 }}
                        footer={
                            <div
                            style={{
                                textAlign: 'right',
                            }}
                            >
                            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                                Cancel
                            </Button>
                            <Button onClick={this.onClose} type="primary">
                                Submit
                            </Button>
                            </div>
                        }
                        >
                        <Form layout="vertical" hideRequiredMark>
                            <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                name="package"
                                label="包名"
                                style={{ width: '100px'}}
                                rules={[{ required: true, message: 'Please input the package name' }]}
                                >
                                <Input placeholder="Please enter package name" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                name="version"
                                label="版本"
                                style={{ width: '100px'}}
                                rules={[{ required: true, message: 'Please input the package version' }]}
                                >
                                <Input placeholder="Please enter ackage version" />
                                </Form.Item>
                            </Col>
                            </Row>
                        </Form>
                </Drawer>
            </Fragment>
        )
    }
}

export default MachineList